<template>
  <t-tabs v-model="value" :destroyOnHide="false">
    <t-tab-panel value="first" label="外观">
      <PenProps />
    </t-tab-panel>
    <t-tab-panel value="second" label="事件">
      <EventProps />
    </t-tab-panel>
    <t-tab-panel value="third" label="动效">
      <lineAnimate />
    </t-tab-panel>
    <t-tab-panel value="four" label="数据">
      <BindData />
      <!-- <template>数据待开发</template> -->
    </t-tab-panel>
    <!-- <t-tab-panel value="five" label="结构">
      <Structure />
       <p>结构待开发</p>
    </t-tab-panel> -->
  </t-tabs>
</template>

<script lang="ts" setup>
import { ref, watch, nextTick } from 'vue';
import PenProps from './fileProps/PenProps.vue';
import lineAnimate from './fileProps/lineAnimate.vue';
import EventProps from './fileProps/EventProps.vue';
import BindData from './fileProps/bindData.vue';



import { useSelection } from '../../services/selections';
const { selections } = useSelection();
console.log("selections", selections)

console.log("selections.pen", selections.pen)  


const value = ref('first');
</script>

<style lang="scss" scoped>
.props-panel {
 
}
</style>